@import '../def.scss';
@font-face {
	
	font-family: "Digital";
	src: url('~@/style/fonts/Digital-7_Mono/digital-7__mono_.ttf');
	font-weight: normal;
	font-style: normal;
}
.content {
	// width: 690rpx;
	// margin: 0 auto;
	padding-bottom: 0;
	background: #FFFFFF;
	.tui-header-center {
		margin-top: 20rpx;
		background: #FFFFFF;
		width: 100%;
		height: 128rpx;
		padding: 25rpx 54rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.02);
		.tui-info {
			width: 60%;
			padding: 30rpx;
			flex: 1;
			font-size:30upx;
			color: #000;
		}
		.tui-nickname{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			padding-bottom: 4rpx;
			display: flex;
			align-items: center;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-left: 5px;
			}
		}
		.tui-explain{
			span{
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 34rpx;
				padding-right: 30rpx;
			}
		}
		.tui-avatar{
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			width: 88rpx;
			height: 88rpx;
			display: block;
			border-radius: 50%;
		}
		.tui-btn-edit{
			.news{
				position: relative;
				.unread{
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: #D10D28;
					position: absolute;
					top:0upx;
					right:0upx;
					color:#FFFFFF;
					text-align: center;
					line-height: 25upx;
					font-size: $f18;
							
				}
			}
			image{
				margin-left: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		
	}
}
.topic-header{
	width: 690rpx;
	margin: 0 auto;
	height: 88rpx;
	background: #9FF8FF;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(92,159,254,0.14);
	border-radius: 4rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	.left{
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
		
	}
	.right{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.userInfo{
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			.user-img{
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				border:1rpx solid rgba(0,0,0,0.5);
				margin-right: 10rpx;
			}
			.user-num{
				background: #FFFFFF;
				padding: 4rpx 6rpx;
				font-size: 36rpx;
				font-family: Digital;
				font-weight: normal;
				color: #FF6464;
				line-height: 36rpx;
			}
		}
	}
}
.topic-body{
	width: 690rpx;
	margin: 0 auto;
	// background: #F7F7F7;
}
.send-popup {
	width: 690rpx;
	padding: 30rpx 40rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 8rpx;
	position: relative;
	.close{
		position: absolute;
		bottom: -80rpx;
		left: 50%;
		transform: translateX(-50%);
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}
}
.send-head{
	width: 100%;
	display: flex;
	justify-content: space-between;
	.textarea-wrap{
		background: #FFFFFF;
		box-sizing: border-box;
		padding-right: 20rpx;
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		position: relative;
		textarea {
			width: 100%;
			height: 100%;
			// padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			font-size: 26upx;
			line-height: 30rpx;
			color: #000;
		}
		.num{
			position: absolute;
			bottom: 0;
			right: 0;
			font-size: 20rpx;
			font-weight: 400;
			color: #BCBCBC;
			line-height: 28rpx;
			padding: 20rpx;
			background: #FFFFFF;
		}
	}
	.send-btn{
		width: 164rpx;
		height: 56rpx;
		background: #5C9FFE;
		border-radius: 8rpx;
		border: 1px solid #5C9FFE;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}
}

.upload-list {
	width: 100%;
	box-sizing: border-box;
	font-size: 0;
	height: 100%;
	display: flex;
	align-items: center;
	margin-top: 45rpx;
	flex-wrap: wrap;
	.upload-item {
		width: 120rpx;
		height: 120rpx;
		background: #F3F4F6;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0;
		flex-wrap: wrap;
		margin-right: 15upx;
		margin-bottom: 15rpx;
		flex-wrap: wrap;
		position: relative;
		
		image,video {
			width: 100%;
			height: 100%;
		}
	}
}
.del{
	position: absolute;
	width: 30rpx !important;
	height: 30rpx !important;
	top:-10rpx;
	right: -10rpx;
	z-index: 66;
}
.upload-wrap{
	position: relative;
	margin-right: 20rpx;
}
//我的影子
.section{
	.title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
		padding: 38rpx 40rpx;
	}
	
	.user-section{
		width: 100%;
		height: 500rpx;
		position: relative;
		margin-top: 60rpx;
		.center{
			width: 220rpx;
			height: 220rpx;
			background: linear-gradient(180deg, #87C7FF 0%, #5C9FFE 100%);
			box-shadow: 0px 0px 16rpx 8rpx rgba(92,159,254,0.12);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 56rpx;
			text-shadow: 0px 4rpx 8rpx rgba(0,0,0,0.1);
			position: absolute;
			z-index: 2;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		// & .red{
		// 	background:#D10D28 ;
		// }
		// & .blue{
		// 	background:#3C73CE ;
		// }
		// & .green{
		// 	background:#44C078 ;
		// }
		// & .yellow{
		// 	background:#DD831E ;
		// }
		.user-box{
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			.pic{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.add{
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
			}
		}
		.user_1{
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.user_2{
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.user_3{
			left: 12%;
			top: 50%;
			transform: translateY(-50%);
		}
		.user_4{
			right: 12%;
			top: 50%;
			transform: translateY(-50%);
		}
		.user_5{
			top: 10%;
			left: 20%;
		}
		.user_6{
			bottom: 10%;
			right: 20%;
		}
		.user_7{
			top: 10%;
			right: 20%;
		}
		.user_8{
			bottom: 10%;
			left: 20%;
		}
	}
}
.tab-section{
	display: flex;
	align-items: center;
	padding: 0 40rpx;
	box-sizing: border-box;
	.tab-item{
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 2rpx solid #5C9FFE;
		padding: 8rpx 20rpx;
		box-sizing: border-box;
		font-size: 20rpx;
		font-weight: 500;
		color: #5C9FFE;
		line-height: 28rpx;
		margin-right: 20rpx;
	}
	.active{
		background: #5C9FFE;
		color: #FFFFFF;
	}
}